<div>


        <div style="padding-bottom: 0;">
            <h3>{{ 'WIZARD.MOBILE.INSTALL_MAC.TITLE' | translate }}</h3>
        </div>

        <div>
            <ol>
                <li translate="WIZARD.MOBILE.INSTALL_MAC.STEP_1"></li>
                <li translate="WIZARD.MOBILE.INSTALL_MAC.STEP_2"></li>
                <li translate="WIZARD.MOBILE.INSTALL_MAC.STEP_3"></li>
                <li translate="WIZARD.MOBILE.INSTALL_MAC.STEP_4"></li>
            </ol>
        </div>

        <div layout="row" layout-align="end center" layout-padding>
            <md-checkbox md-theme="eBlockerThemeCheckbox"
                         layout="row" layout-align="start center"
                         ng-model="vm.confirmInstallAppMac"
                         class="md-primary"
                         style="margin-bottom: -1px;"
                         aria-label="Tor country checkbox">
                {{'WIZARD.MOBILE.INSTALL_MAC.CONFIRM_INSTALL' | translate}}
            </md-checkbox>
        </div>

    <div layout="row" layout-align="end center" layout-xs="column">
        <md-button type="button" ng-click="vm.backToDashboard()" class="md-raised md-secondary">
            {{ 'WIZARD.MOBILE.ACTION.CANCEL' | translate }}
        </md-button>
        <md-button type="button" ng-click="vm.prevStep()" class="md-raised md-secondary">
            {{ 'WIZARD.MOBILE.ACTION.BACK' | translate }}
        </md-button>
        <md-button type="button" ng-click="vm.nextStep()" ng-disabled="!vm.confirmInstallAppMac" class="md-raised md-primary md-accent">
            {{ 'WIZARD.MOBILE.ACTION.CONTINUE' | translate }}
        </md-button>
    </div>
</div>
